import Link from "next/link";

import { notFound } from "next/navigation";

import { serverCaller } from "@/lib/trpc/server";

export const dynamic = "force-dynamic";

const KIND_LABEL: Record<string, string> = {

  dj: "DJ",

  promoter: "Promoter",

  "stepping-group": "Stepping Group",

  instructor: "Instructor",

  class: "Class",

};

function stamp(d: Date | null | undefined) {

  if (!d) return "";

  return new Date(d)

    .toLocaleString("en-US", {

      month: "short",

      day: "numeric",

      year: "numeric",

    })

    .toUpperCase();

}

export default async function ProfilePage({

  params,

}: {

  params: Promise<{ slug: string; kind: string; id: string }>;

}) {

  const { slug, kind, id } = await params;

  const caller = serverCaller();

  const city = await caller.city.bySlug({ slug });

  if (!city) notFound();

  const label = KIND_LABEL[kind];

  if (!label) notFound();

  if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id)) {

    notFound();

  }

  let title = "";

  let typeLine = label.toUpperCase();

  let body: string | null = null;

  let emptyBody = "Nothing on record yet.";

  let createdAt: Date | null = null;

  const meta: string[] = [];

  if (kind === "dj") {

    const dj = await caller.dj.byId({ id });

    if (!dj) notFound();

    title = dj.name;

    body = dj.bio ?? null;

    emptyBody = "No bio yet. This DJ keeps the set list close.";

    createdAt = dj.createdAt;

  } else if (kind === "promoter") {

    const promoter = await caller.promoter.byId({ id });

    if (!promoter) notFound();

    title = promoter.name;

    body = promoter.bio ?? null;

    emptyBody = "No bio yet. This promoter lets the sets speak.";

    createdAt = promoter.createdAt;

  } else if (kind === "instructor") {

    const instructor = await caller.instructor.byId({ id });

    if (!instructor) notFound();

    title = instructor.name;

    body = instructor.bio ?? null;

    emptyBody = "No bio yet. Ask about lessons at the next set.";

    createdAt = instructor.createdAt;

  } else if (kind === "stepping-group") {

    const group = await caller.steppingGroup.byId({ id });

    if (!group) notFound();

    title = group.name;

    body = group.bio ?? null;

    emptyBody = "No bio yet. This group lets the glide do the talking.";

    createdAt = group.createdAt;

  } else {

    const klass = await caller.class.byId({ id });

    if (!klass) notFound();

    title = klass.title;

    body = klass.instructor ? `Taught by ${klass.instructor}.` : null;

    emptyBody = "No detail yet. The first line gets taught soon.";

    createdAt = klass.createdAt;

    if (klass.instructor) meta.push(`WITH ${klass.instructor.toUpperCase()}`);

    if (klass.schedule) meta.push(klass.schedule.toUpperCase());

    meta.push(klass.isFree ? "FREE" : "PAID");

  }

  return (

    <main className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8">

      <Link href={`/city/${slug}/floor`} className="kicker hover:text-gold">

        ← The Floor

      </Link>

      <p className="kicker mt-10 text-ash">

        {typeLine} · {city.name}

      </p>

      <h1 className="display mt-3 text-6xl sm:text-7xl">{title}</h1>

      {body ? (

        <p className="serif mt-6 max-w-xl text-xl text-bone">{body}</p>

      ) : (

        <p className="serif mt-6 max-w-xl text-xl text-ash">{emptyBody}</p>

      )}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <p className="kicker text-gold">On the record</p>

        <p className="kicker mt-4 text-ash">

          {[

            label.toUpperCase(),

            (city.metroLabel ?? city.name).toUpperCase(),

            ...meta,

            createdAt ? `EST. ${stamp(createdAt)}` : null,

          ]

            .filter(Boolean)

            .join(" · ")}

        </p>

      </section>

    </main>

  );

}